<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    <div id="root">
        <form>
            姓名: <input type="text" v-model="name"><br>
            性别: <label for="nan"><input type="radio" id="nan" value="男" v-model="sex">男</label>
            <label for="nv"><input id="nv" type="radio" value="女" v-model="sex">女</label><br>
            爱好: <input type="checkbox" value="篮球" v-model="checkbox" >篮球 
            <input type="checkbox" value="唱歌" v-model="checkbox">唱歌
            <input type="checkbox" value="写代码" v-model="checkbox">写代码 <br>
            职业: <select v-model="mySelect" multiple>
                <option value="老板">老板</option>
                <option value="软件工程师">软件工程师</option>
                <option value="律师">律师</option>
                <option value="教师">教师</option>
            </select><br>
            个人简介: <textarea v-model="text" cols="15" rows="2"></textarea><br>
            年龄: <input type="text" v-model="age"><br>
            城市: <select v-model="city">
                <option value="" disabled>请选择城市</option>
                <option value="厦门">厦门</option>
                <option value="龙岩">龙岩</option>
                <option value="福州">福州</option>
                <option value="漳州">漳州</option>
            </select><br>
            <input type="checkbox" v-model="bool" value="false" >同意协议
            <input type="button" :disabled="bool===false" value="提交" @click="submit">
            <h1>您的个人信息是：</h1>
            <h1 v-if="view">用户名：{{name}} 年龄：{{age}} 性别：{{sex}} 爱好：{{checkbox}} 职业：{{mySelect}} 
                自我介绍：{{text}} 城市：{{city}} </h1> 
        </form>

    </div>
    <script>
        var vm = new Vue({
            el: '#root',
            data: {
                name:'',
                sex: '',
                checkbox:[],
                mySelect:[],
                text:'',
                age:'',
                city:'',
                bool: false,
                view: false
            },
            methods: {
                submit(){
                    this.view = true
                }
            },
        })
    </script>
</body>

</html>